<template>
  <div class="dialog">
    <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" width="45%">
      <el-form :model="createForm" label-width="160px" label-suffix=":" :rules="rules" ref="createForm">
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="资源名称" prop="resourceName">
              <el-input v-model.trim="createForm.resourceName" placeholder="请输入资源名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="资源编码" prop="resourceCode">
              <el-input v-model.trim="createForm.resourceCode" placeholder="请输入资源编码"></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="资源类型" prop="resourceType">
              <el-select v-model="createForm.resourceType" placeholder="请选择" style="width: 100%;">
                <el-option label="功能" value="1" />
                <el-option label="菜单" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="上级名称" prop="parentName">
              <el-input v-model.trim="createForm.parentName" placeholder="请点击图标选择上级" readonly>
                <i slot="prefix" class="el-input__icon el-icon-search" @click="onSearchParentNumber"></i></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="资源路径" prop="resourceUrl">
              <el-input v-model.trim="createForm.resourceUrl" placeholder="请输入资源路径"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="组件名称" prop="resourceModule">
              <el-input v-model.trim="createForm.resourceModule" placeholder="请输入组件名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="图标" prop="icon">
              <el-input v-model.trim="createForm.icon" placeholder="请输入图标"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="排序" prop="orderNo">
              <el-input v-model.trim="createForm.orderNo" placeholder="请输入排序"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeNetWorker()">关 闭</el-button>
        <el-button type="primary" @click="confirmData('createForm')">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="选择上级" :visible.sync="visibleFile" :before-close="closeFunctionTree" :close-on-click-modal="false"
      width="45%" style="height: 900px;">
      <div class="content">
        <el-tree :data="allTree" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true"
          :expand-on-click-node="false"></el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeFunctionTree()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import {
  sysResourceAdd,
  sysResourceUpdate,
  sysResourceAllTreeForSelect
} from '@/api/index'
export default {
  name: "FunctionDialog",
  data() {
    return {
      title: "",
      visible: false,
      visibleFile: false,
      createForm: {},
      allTree: [],
      defaultProps: {
        children: 'children',
        label: 'resourceName'
      },
      rules: {
        resourceName: [
          { required: true, message: "请输入资源名称", trigger: "blur" },
          // { max: 20, message: "字数不超过20", trigger: "blur" },
        ],
        resourceCode: [
          { required: true, message: "请输入资源编码", trigger: "blur" },
          // { max: 20, message: "字数不超过20", trigger: "blur" },
        ],
        resourceType: [
          { required: true, message: "请选择资源类型", trigger: 'blur' },
        ],
        parentName: [
          { required: true, message: "请选择上级名称", trigger: 'submit' },
        ],
        resourceUrl: [
          { required: true, message: "请输入资源路径", trigger: "blur" },
        ],
        resourceModule: [
          { required: true, message: "请输入组件名称", trigger: "blur" },
        ],
        orderNo: [
          { required: true, message: "请输入排序", trigger: "blur" },
        ],
      },
    }
  },
  created() { },
  mounted() { },
  methods: {
    add() {
      this.title = "新增";
      this.createForm = {};
      this.initTree();
      this.visible = true;
    },
    edit(val) {
      this.title = "编辑";
      this.createForm = Object.assign({}, val)
      this.initTree();
      this.visible = true;
    },
    initTree() {
      sysResourceAllTreeForSelect({}).then(res => {
        if (res.data.code == 0) {
          this.allTree = res.data.data
        }
      })
    },
    confirmData(formData) {
      this.$refs[formData].validate((valid) => {
        if (valid) {
          if (this.createForm.id) {
            sysResourceUpdate(this.createForm).then((res) => {
              const data = res.data
              if (data.code == 0) {
                this.$message.success('修改成功');
                this.$emit('ok');
                this.closeNetWorker();
              } else {
                this.$message.error(data.data || '修改失败')
              }
            })
          } else {
            sysResourceAdd(this.createForm).then((res) => {
              const data = res.data
              if (data.code == 0) {
                this.$message.success('新增成功');
                this.$emit('ok');
                this.closeNetWorker();
              } else {
                this.$message.error(data.data || '新增失败')
              }
            })
          }
        }
      });
    },
    onSearchParentNumber() {
      setTimeout(() => {
        this.visible = false;
      }, 10);
      this.visibleFile = true;
    },
    handleNodeClick(data) {
      this.createForm.parentId = data.id;
      this.createForm.parentName = data.resourceName;
      this.visible = true;
      this.visibleFile = false;
    },
    closeNetWorker() {
      this.createForm = {};
      this.visible = false;
    },
    closeFunctionTree() {
      this.visible = true;
      this.visibleFile = false;
    }
  }
};
</script>
<style scoped lang="less">
.content {
  height: 400px;
  overflow: auto;
}
</style>
